<template>
    <nav-bar>
        <div slot="left" @click="backClick"><img src="~assets/img/common/back.svg" alt=""></div>
        <div slot="center" class="center">
            <div v-for="(item,index) in titles"
                 class="nav-item"
                 :class="{active: index ===currentIndex}"
                 @click="navClick(index)">{{item}}</div>
        </div>
    </nav-bar>
</template>

<script>
    import NavBar from "components/common/navbar/NavBar"
    export default {
        name: "DetailBavBar",
        data(){
            return{
                titles:['商品','参数','评论','推荐'],
                currentIndex:0
            }
        },
        components:{
            NavBar
        },
        methods:{
            backClick(){
                this.$router.go(-1)
            },
            navClick(index){
                this.currentIndex = index
                this.$emit('navClick',index)
            }
        }
    }
</script>

<style scoped>
    .left img{
        margin-top: 11px;
    }
    .center{
        display: flex;
    }
    .nav-item{
        flex: 1;
    }
    .active{
        color: var(--color-high-text);
    }
</style>
